<template>
  <mescroll-body
    ref="mescrollRef"
    @init="mescrollInit"
    @down="downCallback"
    @up="upCallback"
    :down="{
      use: false
    }"
  >
    <view class="notice">mescroll的极简示例,大部分情况就是这么用</view>
    <!-- <good-list :list="goods"></good-list> -->
  </mescroll-body>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import { purchaseList } from '@/api/http/wantBuy'

export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      goods: [] // 数据列表
    }
  },
  methods: {
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      purchaseList({
        pageNo: page.num,
        pageSize: page.size,
        ...this.searchVal
      })
        .then((res) => {
          if (res.code === 200) {
            if (page.num == 1) this.goods = [] //如果是第一页需手动制空列表
            this.goods = this.goods.concat(res.data.records)
            this.mescroll.endSuccess(res.data.records.length)
          } else {
            this.mescroll.endErr()
          }
        })
        .catch(() => {
          this.mescroll.endErr()
        })
    }
  }
}
</script>

<style>
/*说明*/
.notice {
  font-size: 26upx;
  padding: 40upx 0;
  border-bottom: 1upx solid #eee;
  text-align: center;
  color: #555;
}
</style>
